<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    bankCard.
-->
<template>
  <div class="Web_Box">.
    <div class="Topmenu"><i @click="back" class="iconfont icon-youjiantou"><a href=""></a></i>
      <h1>我的开户行</h1>
      <span></span>
    </div>
    <div class="new_bank">
      <ul>
        <li><i class="iconfont icon-shoujihao"></i>
          <input type="text" v-model="bankEdit.member_mobile" placeholder="请输入电话号码">
          <span></span>
        </li>
        <li><i class="iconfont icon-lianxiren"></i>
          <input type="text" v-model="bankEdit.account_name"  placeholder="姓名">
          <span></span>
        </li>
        <li @click="showbank(1)"><i class="iconfont icon-yinhang" ></i>
          <input type="text" style ="pointer-events:none;" v-model="bankEdit.bank_name" placeholder="开户银行" >
          <span></span>
        </li>
        <li><i class="iconfont icon-kaihuhang"></i>
          <input type="text" v-model="bankEdit.branch_name"  placeholder="开户银行所在支行">
          <span></span>
        </li>
        <li><i class="iconfont icon-yinhangqiahao"></i>
          <input type="text" v-model="bankEdit.member_bank_num" placeholder="请输入银行卡卡号">
          <span></span>
        </li>
      </ul>
    </div>
    <div @click="save" class="new_bank_btn">确定</div>
    <div class="servicebg" v-show="sign!=0">

      <div class="banktc">
        <p class="banktc1">选择开户行 <i class="iconfont icon-guanbi" @click="showbank(0)"></i></p>
        <ul>
          <li v-for="item in allbankList.data"  @click="addBank(item.bank_id,item.bank_name,0)">
            <span class="banktc1_img"><img :src="$config.website + $config.adBrandImgSrc + item.logo_image" alt="" ></span>
            <span>{{item.bank_name}}</span>
            <i class="iconfont icon-xuanzhong1" @click="showbank(0)"></i>
          </li>

        </ul>
      </div>


    </div>
  </div>

</template>

<script>
  import * as validator from '../../validator'
  import {mapModules, mapRules} from 'vuet'
  export default{
    mixins: [
      mapModules({allbankList: 'allbankList'}),
      mapRules({once: 'allbankList'})
    ],
    data() {
      return {
        from: this.$route.query.from || '',
        bankEdit: {
          member_mobile: '',
          account_name: '',
          bank_id: '',
          branch_name: '',
          member_bank_num: '',
          bank_name: ''
        },
        sign: 0
      }
    },
    components: {},
    created() {
    },
    methods: {
      addBank(id, name, close) {
        this.showbank(close)
        this.bankEdit.bank_id = id
        this.bankEdit.bank_name = name
      },
      showbank(key) {
        this.sign = key
      },
      back() {
        this.$router.go(-1)
      },
      save() {
        if (this.bankEdit.account_name === '') {
          this.$toast('请输入姓名')
          return
        }
        if (!validator.phone(this.bankEdit.member_mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.bankEdit.bank_name === '') {
          this.$toast('请选择开户银行')
          return
        }
        if (this.bankEdit.branch_name === '') {
          this.$toast('请输入开户银行所在支行')
          return
        }
        if (this.bankEdit.member_bank_num === '') {
          this.$toast('请输入银行卡卡号')
          return
        }
        this.$request.addBank(this.bankEdit).then(data => {
          this.$toast('添加银行卡成功')
          this.$router.go(-1)
        })
      }
    }
  }
</script>
